<template>
    <div class="type-warp item-warp">
        <div class="item-title">
            <h2>设备类型</h2>
            <a class="btn">
                <img src="../../assets/img/icon/icon_count2.png">
            </a>
        </div>
        <div class="type-box">
            <div class="list" v-for="(item,index) in dataTotalList" :key="index">
                <h3>{{item.name}}</h3>
                <h1>{{item.total}}</h1>
                <h4>今日&nbsp;&nbsp;{{item.count || 0}}&nbsp;&nbsp;{{item.percentage?(item.percentage*100).toFixed(0):0}}%</h4>
                <div class="type-chart">
                    <liquid-fill :data="item.ballPercentage ? item.ballPercentage : 0"></liquid-fill>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import LiquidFill from "../Echarts/EchartsLiquidfill/index";
    import {
        getDeviceTypeData,
    } from "@/api/apiList";

    export default {
        name: "deviceType",
        components: {LiquidFill},
        data: () => ({
          dataList: [],
          dataTotalList: [],
        }),
        methods: {
            /**
             * 设备类型数据
             */
            getDeviceTypeData() {
                getDeviceTypeData({}).then(res => {
                    console.log('设备类型数据', res.data);
                    let data = res.data.data;
                    let dataToday = res.data.dataToday;
                    data.map( item => {
                        item.total = item.count;
                        delete item.count;
                        dataToday.map(i => {
                          if (item.code == i.code) {
                            item.count = i.count;
                            // item.code === i.code ? item.count = i.count : item.count = 0;
                          }
                        });
                    });
                    this.dataList = data;
                    let dataTotalList = this.dataList;
                    dataTotalList.forEach( item => {
                      let deviceTotal = Number(dataTotalList[0].total) + Number(dataTotalList[1].total) + Number(dataTotalList[2].total);
                      item.percentage = Number(item.count) / deviceTotal
                      item.ballPercentage = Number(item.total) / deviceTotal
                    })
                    this.dataTotalList = dataTotalList;
                });
            }
        },
        created() {
            this.getDeviceTypeData();
        }
    }
</script>

<style scoped type="text/less" lang="less">
    .type-warp {
        width: 52%;
        margin-right: 14px;
        background-image: url("../../assets/img/bg/bg_k04.png");
        background-size: 100% 100%;
        .type-box {
            display: flex;
            padding: 10px 20px;
            .list {
                margin-right: 35px;
                width: calc((100% - 70px) / 3);
                text-align: center;
                h3, h1, h4 {
                    color: @wordColor1;
                }
                h3 {
                    font-size: 16px;
                }
                h1 {
                    font-size: 24px;
                    line-height: 46px;
                }
                h4 {
                    font-size: 12px;
                    line-height: 20px;
                }
                &:last-child {
                    margin-right: 0;
                }
                .type-chart {
                    margin: 10px auto;
                    width: 114px;
                    height: 114px;
                    border: 10px solid #22458f;
                    border-radius: 57px;
                }
            }
        }
    }
</style>
